<template>
  <!-- TODO:撑高滚动条 -->
  <div class="scrollbar" :style="scrollBarStyle">
    <div ref="slider" @mousedown.stop="mousedown" :style="sliderStyle" class="slider"></div>
  </div>
</template>
<script>
  import BindEvent from '../utils/bind-event';

  export default {
    props: {
      maxHeight: {
        type: Number
      },
      height: {
        type: Number,
        default: 500
      },
      calcLineHeight: {
        type: Number,
        default: 54
      },
      tableHeaderHeight: {
        type: Number,
        default: 0
      },
      tableBodyHeight: {
        type: Number,
        default: 0
      },
      tableDataHeight: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        scrollTop: 0,
        moveStart: false
      };
    },
    computed: {
      scrollBarStyle() {
        let style = { top: this.tableHeaderHeight + 'px', height: this.height + 'px' };
        if (this.moveStart) {
          style.opacity = '1';
        }
        return style;
      },
      sliderHeight() {
        return Math.max(15, this.height * (this.height / this.tableDataHeight));
      },
      sliderStyle() {
        return {
          height: this.sliderHeight + 'px'
        };
      }
    },
    created() {},
    mounted() {
      BindEvent.bind(window.document, 'mousemove', this.mousemove);
      BindEvent.bind(window.document, 'mouseup', this.mouseup);
      BindEvent.bind(window.top.document, 'mouseup', this.mouseup);
      this.elTop = this.$el.getBoundingClientRect().top;
    },
    beforeDestroy() {
      BindEvent.unbind(window.document, 'mousemove', this.mousemove);
      BindEvent.unbind(window.document, 'mouseup', this.mouseup);
      BindEvent.unbind(window.top.document, 'mouseup', this.mouseup);
    },
    methods: {
      reset() {
        this.elTop = this.$el.getBoundingClientRect().top;
        this.setScrollbarOffset(0);
        this.$emit('scroll', 0);
      },
      setScrollbarOffset(scrollTop) {
        let catchTop = this.scrollTop;
        let p = scrollTop / (this.tableDataHeight - this.height);
        this.scrollTop = p * (this.height - this.sliderHeight);
        let absTop = Math.abs(catchTop - this.scrollTop);
        if (absTop > 50) {
          this.$refs.slider.style.transition = null;
        } else {
          this.$refs.slider.style.transition = 'none';
        }
        this.$refs.slider.style.top = this.scrollTop + 'px';
      },
      mousedown(e) {
        this.startTop = e.offsetY;
        this.moveStart = true;
        // 取消动画
        this.$refs.slider.style.transition = 'none';
        e.preventDefault();
      },
      mousemove(e) {
        if (this.moveStart) {
          this.scrollTop = this.getScrollTop(e.clientY - this.elTop - this.startTop);
          this.sendScroll();
        }
      },
      mouseup() {
        this.moveStart = false;
      },
      sendScroll() {
        // 滑动百分比
        let p = this.scrollTop / (this.height - this.sliderHeight);
        this.$emit('scroll', (this.tableDataHeight - this.height) * p);
        this.$refs.slider.style.top = this.scrollTop + 'px';
      },
      getScrollTop(y) {
        if (y < 0) y = 0;
        if (y + this.sliderHeight > this.height) {
          y = this.height - this.sliderHeight;
        }
        return y;
      }
    }
  };
</script>
<style scoped lang="scss">
  .scrollbar {
    z-index: 10;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 5px;
    width: 8px;
    .slider {
      position: absolute;
      border-radius: 5px;
      width: 100%;
      top: 0;
      right: 2px;
      // transition: top 0.1s ease; /* 过渡效果 */
      background-color: #aaa;
      width: 6px;
    }
  }
</style>
